<template>
  <div
    ref="mainRef"
    class="mainEcharts"></div>
</template>

<script lang="ts" setup>
import { init, type ECharts } from 'echarts'
import { onMounted, ref } from 'vue'
import Debounce from '@/compoase/debounce'
const mainRef = ref()
const props = defineProps<{
  options: any
}>()
// 初始化Echarts
let myChart: ECharts | null = null
const initEchart = () => {
  myChart === null && (myChart = init(mainRef.value))
  myChart.setOption(props.options)
}
onMounted(() => {
  initEchart()
})

const debounce = new Debounce()
const resize = debounce.use(() => {
  myChart?.resize()
})
window.addEventListener(
  'resize',
  () => {
    resize()
  },
  { passive: false }
)
</script>

<style lang="scss" scoped>
.mainEcharts {
  height: 100%;
  padding-left: 10px;
}
</style>
